<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <script th:src="@{/erp/assets/js/jquery.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <style type="text/css">
        .imgg img {
            max-width: 100px
        }
    </style>
    <title>商品审核</title>
</head>
<body>
<div class=" page-content clearfix">
    <div id="products_style">
        <form id="queryForm" action="/product/list" method="post" class="search_style">

            <ul class="search_content clearfix">
                <li><label class="l_f">商品名称</label><input name="productName" type="text" class="text_add"
                                                          placeholder="输入商品名称"
                                                          style=" width:250px"/></li>

                <li style="width:90px;">
                    <button type="button" id="btn" class="btn_search"><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </form>
        <div class="border clearfix">
       <span color="red" class="l_f">
	    已审核<b id="a"></b>件商品，待审核<b id="c"></b>件商品，未通过<b id="b"></b>件商品
       </span>
        </div>
        <table class="table table-striped table-bordered table-hover" id="sample-table">
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>材质</th>
                <th>零售价格</th>
                <th>积分</th>
                <th>商品类别</th>
                <th>加入时间</th>
                <th>货物状态</th>
                <th>审核状态</th>
                <th>操作</th>
            </tr>
            </thead>

        </table>
    </div>
</div>

</body>
</html>
<script>

    function states1() {
        $.ajax({
            url: "/product/states",
            type: "get",
            dataType: "json",
            success: function (data) {
                $("#a").text(data.a)
                $("#b").text(data.b)
                $("#c").text(data.c)
            }
        });
    }

    jQuery(function ($) {
        states1();
        var oTable1 = $('#sample-table').dataTable({
            iDisplayLength: 5, //默认显示的记录数
            aLengthMenu: [5, 10, 15, 20, 50, 100], //更改显示记录数选项
            bFilter: false, //是否启动过滤、搜索功能
            "autoWidth": true,
            "bStateSave": false,//状态保存
            "serverSide": true,		//打开服务器模式
            "ajax": {
                "url": "/product/list",
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;//自定义需要传递的参数。
                },
            },
            "columns": [
                {"data": 'id'},
                {"data": 'productName'},
                {
                    "data": 'picture', "render": function (data) {
                        return '<img src="/upload/' + data + '" height="50px">'
                    }
                },
                {"data": 'materialQuality'},
                {"data": 'retailPrice'},
                {"data": 'integral'},
                {"data": 'productType'},
                {"data": 'createTime'},
                {"data": 'productStates'},
                {
                    "data": 'examineStates', "render": function (data) {
                        if (data === "未通过") {
                            return /*<![CDATA[*/"<span class='label label-defaunt radius'>未通过</span>"/*]]>*/;
                        } else if (data === "待审核") {
                            return /*<![CDATA[*/"<span class='label label-info radius'>待审核</span>"/*]]>*/;
                        } else {
                            return /*<![CDATA[*/"<span class='label label-success radius'>审核通过</span>"/*]]>*/;
                        }
                    }
                },
                {"data": null}
            ], "columnDefs": [
                {
                    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                    // return后边是我们希望在指定列填入的按钮代码
                    "targets": -1,
                    "render": function (data, type, full, meta) {
                        if (data.examineStates == "待审核") {
                            return /*<![CDATA[*/"<div id='check' class=\"btn btn-xs btn-success \"><i class=\"icon-ok bigger-120\"></i></div> \n" +
                                "\t\t\t  <div title=\"查看商品属性\" id='select' class=\"btn btn-xs btn-warning\"  ><i class=\"icon-list bigger-120\"></i></div>\n"
                            /*]]>*/
                        } else {
                            return /*<![CDATA[*/"<div class=\"btn btn-xs \"><i class=\"icon-ok bigger-120\"></i></div> \n" +
                                "\t\t\t  <div title=\"查看商品属性\" id='select' class=\"btn btn-xs btn-warning\"  ><i class=\"icon-list bigger-120\"></i></div>\n"
                            /*]]>*/
                        }
                    }
                }
            ],
        });
        $("table tbody").on("click", "#select", function () {
            var row = $("table tr").index($(this).closest("tr"));
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();

            layer.open({
                type: 2,
                title: '查看详情',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '100%'],
                content: '/product/productByIds?id=' + id,//iframe的url
                end: function () {
                    oTable1.fnDraw(false);
                }
            });
        });
        $("table tbody").on("click", "#check", function () {
            var row = $("table tr").index($(this).closest("tr"));
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();
            var states = $("table").find("tr").eq(row).find("td").eq(9).text();
            if (states == "待审核") {
                layer.open({
                    content: '是否通过？'
                    , btn: ['确定', '拒绝', '取消']
                    , yes: function (index, layero) {
                        $.ajax({
                            url: '/product/examineStates1?id=' + id,
                            contentType: 'application/json',           //表示我们发送给服务器数据是json格式
                            dataType: 'json',                          //表示服务器返回给我们的数据是json格式
                            success: function (data) {
                                if (data.result == true) {
                                    // 提交成功后的回调
                                    layer.msg('审核通过', {icon: 1, time: 1}, function () {
                                        states1();
                                        oTable1.fnDraw();
                                    });
                                } else {
                                    layer.msg('审核失败！', {icon: 2,});
                                }
                            }
                        })
                    }
                    , btn2: function (index, layero) {
                        $.ajax({
                            url: '/product/examineStates2?id=' + id,
                            contentType: 'application/json',           //表示我们发送给服务器数据是json格式
                            dataType: 'json',                          //表示服务器返回给我们的数据是json格式
                            success: function (data) {
                                if (data.result == true) {
                                    // 提交成功后的回调
                                    layer.msg('未通过', {icon: 1, time: 1}, function () {
                                        states1();
                                        oTable1.fnDraw();
                                    });
                                } else {
                                    layer.msg('审核失败！', {icon: 2,});
                                }
                            }
                        })
                    }
                    , btn3: function (index, layero) {
                        layer.close(index)
                    }
                    , cancel: function (index, layero) {
                        layer.close(index)
                    }
                })
                return false;
            }
        });

        $("#btn").click(function () {
            oTable1.fnDraw();
        })
    });


</script>

